<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <!-- <dialog>自带的模态框元素</dialog> -->
    <button id="btn1">成功</button>
    <button id="btn2">失败</button>
    <button id="btn3">警告</button>
    <button id="btn4">信息</button>
</body>
<script>
    // 需求：点击某个元素，提示信息

    function Toast(str){

        if(!Toast.obj){
            Toast.obj = {}
            Toast.obj.ele = document.createElement("dialog")
            document.body.appendChild(Toast.obj.ele)
        }

        Toast.obj.ele.innerHTML = str
        Toast.obj.ele.style.display = "block"

        clearTimeout(Toast.obj.t);
        Toast.obj.t = setTimeout(() => {
            Toast.obj.ele.style.display = "none"
            // this.ele.remove()
        }, 1000);

        return Toast.obj;
    }


    btn1.onclick = function(){
        new Toast(this.innerHTML)
    }
    btn2.onclick = function(){
        new Toast(this.innerHTML)
    }
    btn3.onclick = function(){
        new Toast(this.innerHTML)
    }
    btn4.onclick = function(){
        new Toast(this.innerHTML)
    }

</script>
</html>